<template>
  <div class="push-edit">


    <div class="push-add-content">

      <div class="content">
        <div class="content-head">
          <div class="dot" @click="click"></div>
        </div>
        <!--        <div class="content-push"></div>-->
        <label for="text-push" class="label-push"></label>
        <textarea class="content-push" id="text-push" v-model="newPush.content"></textarea>
      </div>
      <button class="send" @click="pushSuccess">
        send
      </button>
    </div>

  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";

export default {
  name: "PushEdit",
  data() {
    return {
      newPush: {
        id: 10001,
        user: {},
        date: "2021/1/3 上午1:32:16",
        content: ""
      }
    }
  },
  computed: {
    ...mapState(['pushList', 'user']),
  },
  methods: {
    ...mapMutations(['addPushList', 'notify', 'activateNotify']),
    click() {
      this.activateNotify(false);
      this.$emit('click')
    },
    pushSuccess() {

      let message;
      if (!this.newPush.content || this.newPush.content.trim() === '') {
        message = '内容为空哦，确认要提交吗？';
      } else {
        message = '确认嘛？';
      }

      this.notify({
        msg: message, action: true, success: () => {
          let id = this.pushList.length + 10000;
          this.newPush.user = this.user;
          this.newPush.id = id + 1;
          this.newPush.date = new Date().toLocaleString();
          this.addPushList(this.newPush);
          this.$emit('pushSuccess')
        }
      })


    }
  }
}
</script>

<style lang="less">
.push-edit {
  z-index: 1;
  position: absolute;
  width: 300px;
  height: 200px;
  border-radius: 20px;

  .dot {
    position: absolute;
    z-index: 10;
    top: 20%;
    left: 10%;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background-color: #44b3ec;
    box-shadow: 0 4px 0 #62a6ec;
    color: #fff;
  }

  .push-add-content {
    position: absolute;
    display: flex;
    justify-content: space-between;
    height: 95%;
    width: 95%;
    top: 2.5%;
    left: 2.5%;

    .content {
      height: 100%;

      .content-head {
        position: absolute;
        height: 21.5%;
        width: 78%;
        top: 0;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 20px 0 0 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      }

      .content-push {
        position: absolute;
        border-radius: 0 0 0 20px;
        bottom: 0;
        width: 78%;
        height: 76%;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        background: rgba(255, 255, 255, 0.8);
      }
    }

    .send {
      width: 20%;
      height: 100%;
      border: solid 1px rgba(255, 255, 255, 0.8);
      background: rgba(255, 255, 255, 0.8);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      font-size: 12pt;
      text-align: center;
      border-radius: 0 20px 20px 0;
      cursor: pointer;
      color: #002E40;
    }

    .send:active {
      background: rgba(238, 235, 235, 0.8);
    }

    #text-push {
      resize: none;
      border: none;
      font-size: 17px;
      padding: 10px;
      transition: all .2s linear;
    }

  }
}
</style>